<nz-layout class="layout">
    <nz-header>
        <div nz-row>
            <div nz-col nzXs="2" nzSm="4" nzMd="6" nzLg="8" nzXl="10">
                <h1 style="color: white; display: inline; " >请假管理系统</h1> 
            </div>
            <div nz-col nzXs="20" nzSm="16" nzMd="12" nzLg="8" nzXl="4">
            </div>
            <div nz-col nzXs="2" nzSm="4" nzMd="6" nzLg="8" nzXl="10">
                <button  *ngIf="this.currentUser != null" nz-button nz-popover nzTitle="个人信息" [nzContent]="currentUserInfo" nzPlacement="bottomLeft" style="margin-left:30%;">{{this.currentUser.eid}}</button>        
                <button style="margin-left:5px" nzOkText="确定" nzCancelText="取消" nz-popconfirm nzTitle="你确定退出吗？" (nzOnConfirm)="logout()" (nzOnCancel)="cancel()" nzPlacement="bottom" nz-button nzType="dashed" >登出</button>
            </div>
          </div>
    </nz-header>
    <nz-content style="padding:0 50px;">
        <button style="margin-left:48%; margin-top: 5px; margin-bottom: 5px" nz-button nzType="primary" nzShape="circle" (click)="showModal()">
            <i nz-icon type="plus"></i>
        </button>
        
        <nz-table #nzTable [nzData]="displayData">
            <thead>
              <tr>
                <th nzShowSort [(nzSort)]="sortMap.eid" (nzSortChange)="sort('eid',$event)">工号</th>
                <th nzCustomFilter>
                    姓名
                    <nz-dropdown nzTrigger="click" [nzClickHide]="false" #dropdown>
                      <i nz-icon type="search" class="ant-table-filter-icon" [class.ant-table-filter-open]="dropdown.nzVisible" nz-dropdown></i>
                      <div class="custom-filter-dropdown">
                        <input type="text" nz-input placeholder="Search name" [(ngModel)]="searchValue">
                        <button nz-button [nzType]="'primary'" (click)="search()">Search</button>
                      </div>
                    </nz-dropdown>
                </th>
                <th nzShowFilter [nzFilters]="filterGenderArray" (nzFilterChange)="filterGenderChange($event)">性别</th>
                <th>手机号</th>
                <th>级别</th>
                <th>年假</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let employee of this.displayData">
                <td>{{employee.eid}}</td>
                <td>{{employee.name}}</td>
                <td>{{employee.gender}}</td>
                <td>{{employee.phone}}</td>
                <td>{{employee.authority}}</td>
                <td>{{employee.annualleave}}</td>
                <td>
                    <button nz-button nzType="default" (click)="showEditPage(employee)">编辑</button>   <!-- 显示编辑界面的同时，将要编辑的信息传递给编辑界面 -->
                    <button style="margin-left:5px" nzOkText="确定" nzCancelText="取消" nz-button nzType="danger" nz-popconfirm nzTitle="😱！😱！！😱！！你确定炒了这个员工吗?" (nzOnConfirm)="confirmDelete(employee)" (nzOnCancel)="cancelDelete()" nzPlacement="bottomRight" nz-button>炒了</button>
                    <button style="margin-left:5px" nzOkText="确定" nzCancelText="取消" nzTitle="将密码重置为 '123456' "  nzPlacement="top" nz-tooltip  nz-button nzType="default" nzShape="circle" nz-popconfirm nzTitle="你确定将该用户的密码重置为'123456'吗？" (nzOnConfirm)="handleOkResetPassword(employee)" (nzOnCancel)="handleCancelResetPassword()"><i nz-icon type="edit"></i></button>
                </td>
              </tr>
            </tbody>
        </nz-table>
    </nz-content>
    <nz-footer style="text-align: center;"></nz-footer>
  </nz-layout>
  <ng-template #currentUserInfo>
      <div>
        <p><strong>工号: </strong>{{this.currentUser.eid}}</p>
        <p><strong>姓名: </strong>{{this.currentUser.name}}</p>
        <p><strong>性别: </strong>{{this.currentUser.gender}}</p>
        <p><strong>手机号: </strong>{{this.currentUser.phone}}</p>
        <p><strong>级别：</strong>{{this.level}}</p>
        <button nz-button (click)="showEditCurrentUserPhone(this.currentUser.phone)" nzType="dashed">编辑</button>
        <button style="margin-left:5px"  (click)="showEditCurrentUserPassword()"  nz-button nzType="dashed">密码重置</button>
      </div>
  </ng-template>
  <!-- 编辑当前用户的信息 -->
  <nz-modal [(nzVisible)]="isVisibleOfEditCurrentUser" nzTitle="编辑信息" (nzOnCancel)="handleCancelEditCurrentUser()" (nzOnOk)="handleOkEditCurrentUser()">
    <input style="width: 200px; margin-top: 5px; margin-bottom: 5px" nz-input placeholder="输入手机号" nzSize="default" [(ngModel)]="this.currentUser.phone"><br/>
  </nz-modal>

  <!-- 编辑当前用户的密码 -->
  <nz-modal nzWidth="200" [(nzVisible)]="isVisibleOfEditCurrentUserPassword" nzTitle="密码重置" (nzOnCancel)="handleCancelEditCurrentUserPassword()" (nzOnOk)="handleOkEditCurrentUserPassword()">
    <form nz-form [formGroup]="passwordForm" (ngSubmit)="submitForm()">
        <nz-form-item>
          <nz-form-control [nzSm]="14" [nzXs]="24">
            <input nz-input type="password" placeholder="请输入密码" id="password" formControlName="password" (ngModelChange)="updateConfirmValidator()">
            <nz-form-explain *ngIf="passwordForm.get('password').dirty && passwordForm.get('password').hasError('required')">请输入密码</nz-form-explain>
            <nz-form-explain *ngIf="passwordForm.get('password').dirty && passwordForm.get('password').hasError('minlength')">最小长度为6</nz-form-explain>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-control [nzSm]="14" [nzXs]="24">
            <input nz-input placeholder="确认密码" type="password" formControlName="checkPassword" id="checkPassword">
            <nz-form-explain *ngIf="passwordForm.get('checkPassword').dirty && passwordForm.get('checkPassword').errors">
              <ng-container *ngIf="passwordForm.get('checkPassword').hasError('required')">
                请再次输入密码
              </ng-container>
              <ng-container *ngIf="passwordForm.get('checkPassword').hasError('minlength')">
                最小长度为6
              </ng-container>
              <ng-container *ngIf="passwordForm.get('checkPassword').hasError('confirm')">
                两次密码不匹配
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </form>
  </nz-modal>

  
  <!-- 添加与员工模板 beign -->
  <nz-modal nzWidth="300" [(nzVisible)]="isVisible" [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="modalFooter" (nzOnCancel)="handleCancel()">
      <ng-template #modalTitle>
        添加员工
      </ng-template>

      <ng-template #modalContent>
          <input style="width: 200px" nz-input placeholder="输入工号" nzSize="default" [(ngModel)]="this.infoOfAddingEmployee.eid"><br/>
          <input style="width: 200px; margin-top: 5px" nz-input placeholder="输入姓名" nzSize="default" [(ngModel)]="this.infoOfAddingEmployee.name"><br/>
          <nz-radio-group style="width: 200px; margin-top: 5px" [(ngModel)]="this.infoOfAddingEmployee.gender">
              <label nz-radio nzValue="男">男</label>
              <label nz-radio nzValue="女">女</label>
          </nz-radio-group><br/>
          <input style="width: 200px; margin-top: 5px; margin-bottom: 5px" nz-input placeholder="输入手机号" nzSize="default" [(ngModel)]="this.infoOfAddingEmployee.phone"><br/>
          <nz-select style="width: 200px; margin-top: 5px" style="width: 200px;" nzShowSearch nzAllowClear nzPlaceHolder="员工级别" [(ngModel)]="this.infoOfAddingEmployee.authority">
              <nz-option nzLabel="普通员工" nzValue="普通员工"></nz-option>
              <nz-option nzLabel="部门经理" nzValue="部门经理"></nz-option>
              <nz-option nzLabel="副总经理" nzValue="副总经理"></nz-option>
              <nz-option nzLabel="总经理" nzValue="总经理"></nz-option>
              <nz-option nzLabel="系统管理员" nzValue="系统管理员"></nz-option>
            </nz-select><br/>
          <input style="width: 200px; margin-top: 5px" nz-input placeholder="输入年假天数" nzSize="default" [(ngModel)]="this.infoOfAddingEmployee.annualleave">
      </ng-template>

      <ng-template #modalFooter>
        <button nz-button nzType="primary" (click)="handleOk()" [nzLoading]="isConfirmLoading">提交</button>
      </ng-template>
  </nz-modal>

    <!-- 修改界面 -->
    <nz-modal nzWidth="300" [(nzVisible)]="isVisibleOfEditPage" nzTitle="修改信息" nzOkText="提交" nzCancelText="取消" [nzContent]="editContent" (nzOnCancel)="handleEditCancel()" (nzOnOk)="handleEditOk()" [nzOkLoading]="isEditOkLoading">
        <ng-template #editContent>
            <input style="width: 200px" nz-input placeholder="输入工号" nzSize="default" [(ngModel)]="this.editEmployee.eid" [disabled]="true"><br/>
            <input style="width: 200px; margin-top: 5px" nz-input placeholder="输入姓名" nzSize="default" [(ngModel)]="this.editEmployee.name"><br/>
            <nz-radio-group style="width: 200px; margin-top: 5px" [(ngModel)]="this.editEmployee.gender">
                <label nz-radio nzValue="男">男</label>
                <label nz-radio nzValue="女">女</label>
            </nz-radio-group><br/>
            <input style="width: 200px; margin-top: 5px; margin-bottom: 5px" nz-input placeholder="输入手机号" nzSize="default" [(ngModel)]="this.editEmployee.phone"><br/>
            <nz-select style="width: 200px; margin-top: 5px" style="width: 200px;" nzShowSearch nzAllowClear nzPlaceHolder="员工级别" [(ngModel)]="this.editEmployee.authority">
                <nz-option nzLabel="普通员工" nzValue="普通员工"></nz-option>
                <nz-option nzLabel="部门经理" nzValue="部门经理"></nz-option>
                <nz-option nzLabel="副总经理" nzValue="副总经理"></nz-option>
                <nz-option nzLabel="总经理" nzValue="总经理"></nz-option>
                <nz-option nzLabel="系统管理员" nzValue="系统管理员"></nz-option>
              </nz-select><br/>
            <input style="width: 200px; margin-top: 5px" nz-input placeholder="输入年假天数" nzSize="default" [(ngModel)]="this.editEmployee.annualleave">
        </ng-template>
    </nz-modal>


    <!-- 添加员工 end -->

    <!-- 测试button -->
    <!-- <button nz-button nzType="primary" (click)="getStorage()">Primary</button> -->